<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/favicon.ico"/>
    <title>webman-chat</title>
    <script src="/plugin/webman/push/push.js"></script>
	<style>
	*{margin:0;padding:0;}
	body{font-family:宋体;color:#666;font-size:14px;}
	input,textarea{outline: none;}
	header{width:100%;height:50px;line-height:50px;font-size:18px;}
	header .title{margin:0 10px;}
	nav{width:100%;height:50px;line-height:50px;font-size:16px;color:red;overflow:hidden;display:block;}
	nav a{margin:0 10px;color:#999;}
	nav a:hover{color:red;}
	main{margin:0 10px;}
	section{width:100%;font-size:14px;overflow:hidden;display:block;margin:10px 0;}
	textarea{padding:10px;}
	</style>
</head>

<body>
<header>
	<div class="title">hello <?=htmlspecialchars($name)?></div>
</header>
<nav>
	<a href="/home/index">Exit room</a>
</nav>
<main>
	<section>
		<textarea id="info" rows="20" cols="100"></textarea>
	</section>
	<section>
		<input type="text" id="msg" name="msg">
		<button id="send" name="send" onclick="send(<?=$uid?>,'<?=$nickname?>')">发送</button>
	</section>
</main>
<footer></footer>

<script>
// 建立连接
var connection = new Push({
    url: 'ws://39.108.5.178:3131', 					// websocket地址
    app_key: '3e8e8a604d42512891e5ac5e4ed6398e',	// app_key值
    auth: '/plugin/webman/push/auth' 				// 订阅鉴权(仅限于私有频道)
});

//监听public频道的系统消息
var user_channel = connection.subscribe('public');

// 当public频道有message事件的消息时
user_channel.on('message', function(data) {
    // data里是消息内容
    console.log('message',data);
	
	var info = document.getElementById("info").innerHTML
	document.getElementById("info").innerHTML = info + data.content + '\n';
	
	var textarea = document.getElementById('info');
	textarea.scrollTop = textarea.scrollHeight;
});

//加入聊天室消息提醒
var group_id = 1;
// 浏览器监听group-1频道的消息，也就是监听群组2的群消息
var group_channel = connection.subscribe('group-' + group_id);
// 当群组1有message消息事件时
group_channel.on('message', function(data) {
    // data里是消息内容
    console.log(data);
	
	var info = document.getElementById("info").innerHTML
	document.getElementById("info").innerHTML = info + data.content + '\n';
	
	var textarea = document.getElementById('info');
	textarea.scrollTop = textarea.scrollHeight;
});

//接受聊天消息
var user_channel = connection.subscribe('private-user-1');
user_channel.on('client-message', function (data) {
	console.log(data);
	
	var info = document.getElementById("info").innerHTML
	document.getElementById("info").innerHTML = info + data.form_name + '：' + data.content + '\n';
	
	var textarea = document.getElementById('info');
	textarea.scrollTop = textarea.scrollHeight;
});

//发送
function send(uid,nickname){
	var msg = document.getElementById("msg").value;
	
	var info = document.getElementById("info").innerHTML
	document.getElementById("info").innerHTML = info + nickname + '：' + msg + '\n';
	document.getElementById("msg").value = '';
	
	var user_send = connection.subscribe('private-user-1');
	user_send.trigger('client-message', {form_uid:uid, form_name:nickname, content:msg});
	
	var textarea = document.getElementById('info');
	textarea.scrollTop = textarea.scrollHeight;
}
</script>
</body>
</html>
